<template>
  <div>
    <div>
      <div
        v-for="e in list"
        style="
          width: 90%;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          margin: 30px auto;
          height: 120px;
          border-radius: 10px;
          display: flex;
        "
      >
        <div
          style="
            height: 100%;
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-around;
            padding: 0 20px;
            font-size: 15px;
            font-weight: 600;
            box-sizing: border-box;
          "
        >
          <div>来访单位:{{ e.GuestCompany }}</div>
          <div>访客:{{ e.GuestName }}</div>
          <div>手机号:{{ e.MobilePhone }}</div>
        </div>
        <div
          style="
            width: 100px;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          "
        >
          <div v-if="e.Status == 1">
            <div
              @click="toYes(e)"
              style="
                width: 80px;
                height: 30px;
                background-color: #0e50a5;
                color: white;
                display: flex;
                font-size: 14px;
                font-weight: 600;
                justify-content: center;
                align-items: center;
              "
            >
              通过
            </div>
            <div
              @click="toNo(e)"
              style="
                width: 80px;
                height: 30px;
                background-color: orange;
                color: white;
                margin-top: 10px;
                display: flex;
                font-size: 14px;
                font-weight: 600;
                justify-content: center;
                align-items: center;
              "
            >
              驳回
            </div>
          </div>
          <div
            @click="detail()"
            style="
              width: 80px;
              height: 30px;
              background-color: green;
              color: white;

              margin-top: 10px;
              display: flex;
              font-size: 14px;
              font-weight: 600;
              justify-content: center;
              align-items: center;
            "
          >
            详情
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { showConfirmDialog, showToast } from "vant";

const emit = defineEmits(["yes", "no"]);
withDefaults(
  defineProps<{
    list?: any;
  }>(),
  {
    list: [],
  }
);
const detail = () => {
  showToast("待开发");
};
const toNo = (item: any) => {
  showConfirmDialog({
    title: "温馨提示",
    message: "确定驳回此访问申请?",
  })
    .then(() => {
      emit("no", { res: true, item: item });
    })
    .catch(() => {
      // on cancel
    });
};
const toYes = (item: any) => {
  showConfirmDialog({
    title: "温馨提示",
    message: "确定同意此访问申请?",
  })
    .then(() => {
      emit("yes", { res: true, item: item });
    })
    .catch(() => {
      // on cancel
    });
};
</script>

<style scoped></style>
